<!-- 
  @Author: Your name
  @Date:   2023-02-27 14:40:19
  @Last Modified by:   Your name
  @Last Modified time: 2023-02-27 18:50:41
-->
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=0;">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    </head>
    <body>
        <a href="./">管理后台</a>
        <a href="https://www.sojson.com/">JSON 格式化</a>
        <h1>Menu Configuration</h1>
        <p>https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx3ea51e40d566d4a0&secret=cd59ef384f1473b85494e8fd04ffec26</p><br/>
        <p>default url is:</p><p id="defaultUrl">https://api.weixin.qq.com/cgi-bin/menu/create?access_token={token}</p>
        <form>
            <p>request url is:</p><p id="requestUrl"></p>
            <div style="display:flex;flex-direction: row;width:100%"><select id="methodSelect">
                <option>POST</option>
                <option>GET</option>
                <option>PUT</option>
                <option>DELETE</option>
            </select>
            <input id="uri" style="flex:1;" onchange="onchange" placeholder="please input weixin api you want to call"/>
            </div>
            <textarea class="form-control" style="min-height:500px" 
            placeholder="please input the menu configuration here" id="params"></textarea><br/><br/>
            <button type="button" class="btn btn-primary"  onclick="excuteCommand()">执行操作</button>
        </form>
        <br/>
        <p id="result" style="width: 100%;min-height: fit-content;">
        </p>
        <script>
            var url = document.getElementById("defaultUrl").innerText;
            document.getElementById("requestUrl").innerText = url;
            function doRequest(url,method,params){
                console.log(params.toString());
                    let theUrl = url && url.length > 0 ? url : document.getElementById("defaultUrl").innerText
                    console.log("url:"+theUrl+"method:"+method+"params:"+params);
                    var xmlHttpRequest = new XMLHttpRequest();
                    xmlHttpRequest.open("POST","/wxmenu/create",true);
                    xmlHttpRequest.setRequestHeader("Content-Type","application/json");
                    xmlHttpRequest.setRequestHeader("Accept","application/json");
                    xmlHttpRequest.send(JSON.stringify({url:theUrl,method,params}));
                    xmlHttpRequest.onload = (res)=>{
                        let result = res.currentTarget.responseText;
                        console.log("got result:"+result);
                        document.getElementById("result").innerText = result;
                    }
                    xmlHttpRequest.onerror = (err)=> {
                        console.error(err);
                    }
            }

            function excuteCommand(){
                var url = document.getElementById('uri').value;
                var method = document.getElementById("methodSelect").value;
                let t1 = document.getElementById("params");
                let params = t1.value;
                doRequest(url,method||"POST",params||"")
            }
            
            function onchange(event){
                url = document.getElementById('uri').value;
                document.getElementById("requestUrl").innerText = url;
            }
        </script>
    <body>
</html>
